<template>
	<div id="tops">
		<div class="Box">
			<div id="top">
				<div>
					<div class="bottone">
						<div class="echarts">
							<div class="boxsi">
								<div style="width: 50%">
									<div class="imgbox">
										<i class="el-icon-user-solid" style="color: #40c9c6; font-size: 40px; margin-top: 14px;"></i>
									</div>
								</div>
								<div class="num">
									<div>商品数量</div>
									<div>
										<countTo :startVal='startVal' :endVal='num' :duration='duration'></countTo>
									</div>
								</div>
							</div>
							<div class="boxsi">
								<div style="width: 50%">
									<div class="imgbox">
										<i class="el-icon-chat-dot-square" style="color: #36a3f7; font-size: 40px;margin-top: 14px;"></i>
									</div>
								</div>
								<div class="num">
									<div>未发货单</div>
									<div>
										<countTo :startVal='startVal' :endVal='issued' :duration='duration'></countTo>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div style="margin: auto; margin-left: 550px; margin-top: -70px; width: 950px; height: 320px; background-color: #F0F2F5;"
						 id="main"></div>

						<div style="width:40%;height:500px;float: left; margin-top: 20px; margin-left: 20px; background-color: #F0F2F5;" id="discount"></div>

						<div style="width:55%;height:400px;float: right; margin-top: 120px;background-color: #F0F2F5;">
							<div style="width:50%;height:400px; float: left; background-color: #F0F2F5;" id="nature"></div>
							<div style="width:50%;height:400px; float: right; background-color: #F0F2F5;" id="oysder"></div>
						</div>
					</div>
					<div>

					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import {
		Freighlist
	} from '../../api/echarts.js'
	import countTo from 'vue-count-to'
	const echarts = require('echarts/lib/echarts')
	require('echarts/lib/chart/bar')
	export default {
		components: {
			countTo
		},
		data() {
			return {
				bovig: '',
				city: '',
				puyer: '',
				num: 1, // 商品数量
				issued: 1, // 未发货单
				startVal: 1, //
				duration: 1000 //
				// endVal: 2
			}
		},
		created() {
			this.initCharts()
		},
		mounted() {
			this.initCharts()
		},
		methods: {
			initCharts() {
				Freighlist().then((res) => {
					console.log(res, '456456+456')
					this.num = res.data.data.goodsCount // 未发货单
					this.issued = res.data.data.waitStockCount // 未发货单this.fors()
					this.bovig = res.data.data.daysOrder
					this.diug()
					this.indexs()

					var myCaler = echarts.init(document.getElementById('nature'))
					this.city = res.data.data.area
					var equa
					equa = {
						title: {
							text: '订单地区分布',
							left: 'center'
						},
						// tooltip: {
						// 	trigger: 'item',
						// 	formatter: '{a} <br/>{b} : {c} ({d}%)'
						// },
						legend: {
							data: ['地区分布'],
							left: 'right'
						},
						series: [{
							name: '地区分布',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: this.city,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					}
					equa && myCaler.setOption(equa)

					var myCaqunt = echarts.init(document.getElementById('oysder'))
					this.puyer = res.data.data.channel
					var black
					black = {
						title: {
							text: '订单渠道分布',
							left: 'center'
						},
						// tooltip: {
						// 	trigger: 'item',
						// 	formatter: '{a} <br/>{b} : {c} ({d}%)'
						// },
						series: [{
							name: '地区分布',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: this.puyer,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					}
					black && myCaqunt.setOption(black)
				})
			},

			diug() { // 7日订单
				var myChart = echarts.init(document.getElementById('main'))
				var option
				option = {
					title: {
						text: '7日订单',
						textalign: 'left'
					},
					color: ['#00B5FF'],
					legend: {
						data: ['订单数'],
						left: 'right'
					},
					xAxis: {
						type: 'category',
						data: this.bovig[0]
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					series: [{
						name: '订单数',
						data: [800, 930, 900, 930, 1250, 1300, 1250],
						barWidth: '30%',
						type: 'bar'
					}]
				}
				option && myChart.setOption(option)
			},

			indexs() { // 七日成交定额
				var myhover = echarts.init(document.getElementById('discount'))
				var berigng
				berigng = {
					title: {
						text: '7日成交金额',
						textalign: 'left'
					},
					color: ['#00B5FF'],
					legend: {
						data: ['订单数'],
						left: 'right'
					},
					xAxis: {
						type: 'category',
						data: this.bovig[0]
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					series: [{
						name: '订单数',
						data: [800, 930, 900, 930, 1250, 1300, 1250],
						barWidth: '30%',
						type: 'line'
					}]
				}
				berigng && myhover.setOption(berigng)
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		background-color: pink;
	}

	.Box {
		width: 100%;
		overflow: hidden;
	}

	body {
		background-color: #000000 !important;
	}

	#top {
		background-color: #F0F2F5;
		width: 100%;
		overflow: hidden;
	}

	// .bottone {
	// 	width: 500px;
	// 	height: 400px;
	// 	position: absolute;
	// 	left: 35px;
	// 	top: 100px;
	// }

	.echarts {
		width: 400px;
		height: 70px;
		margin-left: 5%;
		margin-top: 40px;
	}

	.echarts img {
		width: 50px;
		height: 50px;
	}

	.boxsi {
		width: 400px;
		height: 150px !important;
		background: white;
		display: flex;
	}

	.boxsi[data-v-5d6a8484] {
		margin-bottom: 2%;
	}

	.imgbox {
		width: 80px;
		height: 70px;
		margin-left: 11%;
		margin-top: 28px;
		text-align: center;
		line-height: 60px;
	}

	.imgbox:nth-child(1):hover {
		background: #69AFB8;
		/* border-radius: 10px; */
		border-radius: 10px;
	}

	.num {
		width: 100px;
		height: 100px;
		margin-top: 12%;
	}
</style>
